<script lang="ts" setup>
  import { translate } from '@/i18n'
  import { useSettingsStore } from '@/store/modules/settings'

  defineProps({
    itemOrMenu: {
      type: Object,
      default() {
        return null
      },
    },
  })

  const settingsStore: any = useSettingsStore()
  const { theme }: any = storeToRefs(settingsStore)
</script>

<template>
  <el-sub-menu
    :index="itemOrMenu.path"
    :teleported="theme.layout != 'horizontal'"
  >
    <template #title>
      <template v-if="theme.layout === 'horizontal'">
        <i
          v-if="itemOrMenu.meta.icon"
          :class="itemOrMenu.meta.icon"
          :is-custom-svg="itemOrMenu.meta.isCustomSvg"
          :title="translate(itemOrMenu.meta.title)"
          class="iconfont-2x iconfont-fw"
          style="font-size: 16px"
        />
        <span :title="translate(itemOrMenu.meta.title)">
          {{ translate(itemOrMenu.meta.title) }}
        </span>
      </template>
      <template v-else>
        <i
          v-if="itemOrMenu.meta.icon"
          :class="itemOrMenu.meta.icon"
          :is-custom-svg="itemOrMenu.meta.isCustomSvg"
          :title="translate(itemOrMenu.meta.title)"
          class="iconfont-2x iconfont-fw"
          style="font-size: 16px"
        />
        <span :title="translate(itemOrMenu.meta.title)">
          {{ translate(itemOrMenu.meta.title) }}
        </span>
      </template>
    </template>
    <slot />
  </el-sub-menu>
</template>
